<template>
  <div>
    <h1>商品列表</h1>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="商品名称">
        <el-input v-model="formInline.title" placeholder="商品名称"></el-input>
      </el-form-item>
      <el-form-item label="商品编号">
        <el-input v-model="formInline.goodId" placeholder="商品编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="adds">添加</el-button>
    <el-button type="primary" @click="exportData">导出商品信息</el-button>
    <el-upload
      action=""
      :before-upload="importFile"
      :show-file-list="false"
      accept=".xls,.xlsx,.csv"
    >
      <el-button>导入excel</el-button>
    </el-upload>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="id" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品编号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.goodId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类型" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.goodType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品价格" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="dels(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="添加" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="商品编号" :label-width="formLabelWidth">
          <el-input v-model="form.goodId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-input v-model="form.goodType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add"> 确 定</el-button>
      </div>
    </el-dialog>
    <el-button type="primary" @click="dialogForm = true">查看图表</el-button>
    <el-dialog title="图表" :visible.sync="dialogForm">
      <ele-chart :option="saleChartOption" style="height: 285px;" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForm = false">取 消</el-button>
        <el-button type="primary" @click="dialogForm = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
  //例如：import 《组件名称》 from '《组件路径》,
  import { add, batchGoods, del, goodsList } from '@/api/goods/list';
  import { utils, writeFile, read } from 'xlsx';
  import EleChart from 'ele-admin/packages/ele-chart';
  export default {
    //import引入的组件需要注入到对象中才能使用"
    components: { EleChart },
    props: {},
    data() {
      //这里存放数据"

      return {
        tableData: [],
        formInline: {},
        dialogFormVisible: false,
        form: {},
        saleroomData: [],// 数据
        dialogForm: false
      };
    },
    //计算属性 类似于data概念",
    computed: {
      saleChartOption() {
        return {
          tooltip: {
            trigger: 'axis'
          },
          xAxis: [
            {
              type: 'category',
              data: this.saleroomData.map((d) => d.title)
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              type: 'bar',
              data: this.saleroomData.map((d) => d.price)
            }
          ]
        };
      }
    },
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      goodsList() {
        goodsList(this.formInline).then((res) => {
          this.tableData = res;
          this.saleroomData = res;
        });
      },
      onSubmit() {
        this.goodsList();
      },
      adds() {
        this.dialogFormVisible = true;
      },
      add() {
        add(this.form).then(() => {
          this.$message.success('添加成功');
          this.dialogFormVisible = false;
          this.goodsList();
        });
      },
      dels(id) {
        del(id).then(() => {
          this.$message.success('删除成功');
          this.goodsList();
        });
      },
      /* 导出数据 */
      exportData() {
        const array = [
          ['流水号', '商品编号', '商品名称', '商品类型', '商品价格']
        ];
        this.tableData.forEach((d) => {
          array.push([d.id, d.goodId, d.title, d.goodType, d.price]);
        });
        writeFile(
          {
            SheetNames: ['Sheet1'],
            Sheets: {
              Sheet1: utils.aoa_to_sheet(array)
            }
          },
          '用户数据.xlsx'
        );
      },
      /* 导入本地excel文件 */
      importFile(file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          const data = new Uint8Array(e.target.result);
          const workbook = read(data, { type: 'array' });
          const sheetNames = workbook.SheetNames;
          const worksheet = workbook.Sheets[sheetNames[0]];

          const aoa = utils.sheet_to_json(worksheet, { header: 1 });
          console.log(aoa);
          const goodsBatch = aoa.slice(1);
          batchGoods(goodsBatch).then(() => {
            this.$message.success('导入成功');
            this.goodsList();
          });
        };
        reader.readAsArrayBuffer(file);
        return false;
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.goodsList();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
      this.goodsList();
    },
    beforeCreate() {}, //生命周期 - 创建之前",
    beforeMount() {}, //生命周期 - 挂载之前",
    beforeUpdate() {}, //生命周期 - 更新之前",
    updated() {}, //生命周期 - 更新之后",
    beforeDestroy() {}, //生命周期 - 销毁之前",
    destroyed() {}, //生命周期 - 销毁完成",
    activated() {} //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped></style>
